<!-- @format -->

<template>
  <!-- <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
    长按页面保存海报图片到手机
  </van-notice-bar> -->
  <div class="meeting_poster_box">
    <img
      class="poster_header_banner"
      src="@/img/poster/poster-header.png"
      alt=""
    />
    <div class="meeting_poster">

      <div class="meeting_poster_title">
        <h3 class="title">
          {{ detail.topic }}
        </h3>
        <h3 class="title">
          {{ detail.startTime }}
        </h3>
      </div>

      <div class="meeting_poster_body">
        <div
          v-for="(val, index) in detail.speakerPoster"
          :key="val.speakerRoleDesc"
        >
          <div class="body_title">
            <div class="body_title__text">
              <span class="text-primary">{{ val.speakerRoleDesc }}</span>
            </div>
          </div>
          <div class="body_main">
            <van-row justify="center">
              <van-col
                v-for="(item, index) in val.speakerList"
                :key="item.id"
                class="body_main_col"
                :span="getColSpan(index, val.speakerList)"
              >
                <div class="body_main_avatar">
                  <div class="avatar__back">
                    <img
                      class="avatar__back__inner"
                      crossorigin="anonymous"
                      v-if="item.avatar"
                      :src="item.avatar.indexOf('://') > 0 ? item.avatar : '//' + item.avatar"
                      alt=""
                    />
                    <img
                      class="avatar__back__inner"
                      v-else
                      src="@/img/poster/avatar.png"
                      alt=""
                    />
                  </div>
                  <div class="avatar__text">
                    <p class="avatar__text__inner">
                      {{ getSpeakerName(item.speakerName) }} 教授
                    </p>
                    <p class="avatar__text__inner">{{ item.hospital }}</p>
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="body_title">
          <div class="body_title__text">
            <span class="text-primary text-bold">大会日程</span>
          </div>
        </div>
        <div class="body_main">
          <div class="body_main_table">
            <table class="table">
              <thead class="table_thead">
                <tr>
                  <th>时 间</th>
                  <th>会议内容</th>
                  <th>讲 者</th>
                  <th>主 持</th>
                </tr>
              </thead>
              <tbody class="list_body">
                <tr>
                  <td>
                    19:00-19:30
                  </td>
                  <td>主席支持主席支持主席支持主席支持主席支持主席支持主席支持</td>
                  <td>
                    <p><span><span>徐琴</span> 教授</span></p>
                    <p><span><span>徐琴</span> 教授</span></p>
                    <p><span><span>徐琴</span> 教授</span></p>
                  </td>
                  <td rowspan="3">
                    <p><span><span>徐琴</span> 主持</span></p>
                    <p><span><span>徐琴</span> 主持</span></p>
                  </td>
                </tr>
                <tr>
                  <td>19:00-19:30</td>
                  <td>主席支持</td>
                  <td rowspan="2">
                    <p><span><span>张无忌</span> 教授</span></p>
                    <p><span><span>张无忌</span> 教授</span></p>
                    <p><span><span>张无忌</span> 教授</span></p>
                  </td>
                </tr>
                <tr>
                  <td>19:00-19:30</td>
                  <td>主席支持</td>
                </tr>
                <tr>
                  <td>19:00-19:30</td>
                  <td>主席支持主席支持主席支持主席支持主席支持主席支持主席支持主席支持主席支持主席支持</td>
                  <td>
                    <p><span><span>徐琴</span> 教授</span></p>
                  </td>
                  <td>
                    <p><span><span>徐琴</span> 主持</span></p>
                    <p><span><span>徐琴</span> 主持</span></p>
                    <p><span><span>徐琴</span> 主持</span></p>
                    <p><span><span>徐琴</span> 主持</span></p>
                    <p><span><span>徐琴</span> 主持</span></p>
                  </td>
                </tr>
                <!-- <tr v-for="val in detail.schedulePoster">
                  <td>{{ getStartTime(val) }}</td>
                  <td>{{ val.topic }}</td>
                  <td>
                    <p v-for="item in val.nameList" :key="item">
                      <span>
                        <span v-html="getNbspSpeakerName(item)"></span>
                        教授
                      </span>
                    </p>
                  </td>
                </tr> -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="body_main" v-if="false">
          <div class="body_main_list">
            <div class="list_header">
              <div>
                <div>时 间</div>
                <div>会议内容</div>
                <div>讲 者 | 主 持</div>
              </div>
            </div>
            <div class="list_body">
              <div v-for="val in detail.schedulePoster">
                <div>
                  <img class="time_step_icon" src="@/img/poster/dian.png" alt=""/>
                  <span>{{ getStartTime(val) }}</span>
                </div>
                <div>{{ val.topic }}</div>
                <div>
                  <p v-for="item in val.nameList" :key="item">
                    <span>
                      <span v-html="getNbspSpeakerName(item)"></span>
                      教授
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="body_main" v-if="detail.meetingUrl">
          <div class="body_main_qrcode text-center">
            <div class="qrcode__img">
              <vue-qr :text="qrContent" :size="290"></vue-qr>
            </div>
            <p class="qrcode__text">扫码加入会议</p>
          </div>
        </div>
      </div>
      <div class="meeting_poster_footer">
        <img
          class="poster_footer"
          src="@/img/poster/poster-footer.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject, ref, computed, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import moment from 'moment'

const api = inject('api')
const route = useRoute()

const showDom = ref(true)
const detail = ref({})
const speakerList = ref([])
const zhuxiList = ref([])
const imgUrl = ref('')

const qrContent = computed(() => {
  return detail.value.meetingUrl
})

const getStartTime = (val) => {
  if (val.startTime && val.endTime) {
    return `${val.startTime}-${val.endTime}`
  }
  return ''
}

const getColSpan = (index, list) => {
  if (list.length === 1) return 24
  if (list.length % 2 === 1) {
    if (index === list.length - 1) return 24
  }
  return 12
}

const masterTimeRange = computed(() => {
  if (!detail.value) {
    return ''
  }
  let startTime = ''
  let endTime = ''
  speakerList.value.forEach((item, index) => {
    if (item && item.roleId == 1) {
      startTime = item.speakerTimeRange.split('-')[1]
      endTime = moment(
        '2023-04-13 ' + item.speakerTimeRange.split('-')[0] + ':00'
      )
        .add(10, 'minutes')
        .format('HH:mm')
    }
  })
  return startTime + '-' + endTime
})

const getSpeakerName = (val) => {
  let value = val
  if (val.includes('(')) {
    value = val.substring(0, val.indexOf('('))
  } else if (val.includes('（')) {
    value = val.substring(0, val.indexOf('（'))
  }
  return value
}
const getNbspSpeakerName = (val) => {
  if (val.length === 2) {
    return `${val[0]}&nbsp;&nbsp;&nbsp;&nbsp;${val[1]}`
  }
  return val
}

// 长按保存图片
const saveImage = () => {
  const targetDom = document.querySelector('.meeting_poster_box')
  const copyDom = targetDom.cloneNode(true)
  copyDom.className = 'meeting_poster_box'
  copyDom.style.width = targetDom.scrollWidth + 'px'
  copyDom.style.height = targetDom.scrollHeight + 'px'
  document.body.appendChild(copyDom)

  html2canvas(copyDom,{
      allowTaint: false,
      useCORS: true,
      backgroundColor: 'transparent',
      width: targetDom.clientWidth,
      height: targetDom.clientHeight,
  }).then(canvas => {
      showDom.value = false
      document.body.removeChild(copyDom)
      imgUrl.value = canvas.toDataURL('image/png');
  })
}

// 获取会议详情
const getDetail = async () => {
  const res = await api.meetingPoster(route.params.id)
  if (!res.code) {
    detail.value = res.data
    await nextTick(() => {
      // saveImage()
      // console.log(detail.value, speakerList.value, zhuxiList.value)
    })
  }
}

const getBase64 = (url, callback = null) => {
  var Img = new Image(),
    dataURL = ''
  Img.src = url + '?v=' + Math.random()
  Img.setAttribute('crossOrigin', 'Anonymous')
  Img.onload = function () {
    var canvas = document.createElement('canvas'),
      width = Img.width,
      height = Img.height
    canvas.width = width
    canvas.height = height
    canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
    dataURL = canvas.toDataURL('image/jpeg')
    callback ? callback(dataURL) : null
    // return dataURL
  }
}
onMounted(() => {
  getDetail()
})
</script>
